<template>
  <div>
    <!-- banner组件 -->
    <DetailBanner :sightName="sightName" :bannerImg="bannerImg" :bannerImgs="gallaryImgs" ></DetailBanner>
    <!-- header组件 -->
    <DetailHeader></DetailHeader>
    <!-- list组件 -->
    
    <div class="content">
        <DetailList :list="list"></DetailList>
    </div>
  </div>
</template>

<script>
    import DetailBanner from './components/Banner'
    import DetailHeader from './components/Header'
    import DetailList from './components/List'
    import axios from 'axios'
    export default {
        name:'Detail',
        components:{ DetailBanner, DetailHeader, DetailList },
        data() {
            return {
                sightName: '',
                bannerImg: '',
                gallaryImgs: [],
                list: []
            }
        },
        methods: {
            getDetailInfo(){
                // axios.get(`/api/detail.json?id=${this.$route.params.id}`).then(response=>{},error=>{},)
                
                axios.get('https://aygzs.gitee.io/travel/mock/detail.json',{
                    params:{
                        id: this.$route.params.id
                    }
                }).then(
                    response=>{
                        // console.log('请求成功!',response.data);
                        
                        const data = response.data.data

                        if (response.data.ret && data) {
                            this.sightName = data.sightName
                            this.bannerImg = data.bannerImg
                            this.gallaryImgs = data.gallaryImgs
                            this.list = data.categoryList
                        }
                    },
                    error=>{
                        alert('请求失败!',error.message)
                    }
                )
            }
        },
        mounted() {
            this.getDetailInfo()
        },

    }
</script>

<style lang="stylus" scoped>
    .content
        height: 20rem
</style>